import React,{useState} from 'react'
import {} from 'umi'
import './index.less'
import { PageContainer } from '@ant-design/pro-layout';
import { Card ,Select ,Row,Col,Input,Button, Table ,Tag, Space , Popconfirm, message ,Switch , Modal} from 'antd';
import {SearchOutlined} from '@ant-design/icons';
import RightContariner from '@/components/RightContainer/index'
import Search from 'antd/lib/transfer/search';




const SeckillMoment = () => {
    // 搜索按钮选中状态
    const [disables,setDisables] = useState(false);
    // 输入框的value值
    const [val,setVal] = useState('');
    // 弹框显示隐藏
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 存储值
    const [datas,setDatas] = useState([
      {
        id:0,
        key: '1',
        name: 'JohnBrown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
        begin:true,
      },
      {
        id:1,
        key: '2',
        name: 'JimGreen',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
        begin:false,
      },
      {
        id:2,
        key: '3',
        name: 'JoeBlack',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
        begin:false,
      },
      {
        id:3,
        key: '4',
        name: 'mocker',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
        begin:true,
      },
      {
        id:4,
        key: '5',
        name: 'faker',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
        begin:true,
      },
    ]);

    const dat = [
      {
        id:0,
        key: '1',
        name: 'JohnBrown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
        begin:true,
      },
      {
        id:1,
        key: '2',
        name: 'JimGreen',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
        begin:false,
      },
      {
        id:2,
        key: '3',
        name: 'JoeBlack',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
        begin:false,
      },
      {
        id:3,
        key: '4',
        name: 'mocker',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
        begin:true,
      },
      {
        id:4,
        key: '5',
        name: 'faker',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
        begin:true,
      },
    ];
    const { Option } = Select;
    const handleChange = (value) => {
      
      if(value === '开启'){
        const dats = dat.filter(v => {
          return v.begin === true
        })
        setDatas(dats);
        console.log(dats);
      }else if(value === '关闭'){
       const dts = dat.filter(item => {
          return item.begin === false;
        });
        
        setDatas(dts);
        console.log(dts,'dat');
      }else if(value === '请选择'){
        setDatas(dat)
      }
    }

    // 输入框变化
    const changes = (e) => {
        
        setVal(e.target.value);

        if(e.target.value){
            setDisables(true);
        }else{
          setDatas(dat)
          setDisables(false);
            
        }
    }

    // 弹框区域
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };

    // 添加数据
    const addDatum = () => {
      setIsModalVisible(true);
    }

    // 修改数据
    const amend = () => {
      setIsModalVisible(true);
    }

    // 表格数据
    // 搜索
    const searchs = () => {
      const searData = datas.filter(v => {
        return v.name.indexOf(val) !== -1;
      });

      setDatas(searData)
    }  

    // 删除操作
    function confirm(record) {
      message.success('Click on Yes');

      const delList = datas.filter(v => {
        return v.id.toString().indexOf(record.id) === -1
      })
      setDatas(delList);
    }
    // 取消
    function cancel(e) {
      message.error('Click on No');
    }

    // 开关

    function onChange(record) {
      dat[record.id].begin = !record.begin;
      setDatas(dat)
    }
    // 表格规格

    const columns = [
        {
          title: 'ID',
          dataIndex: 'key',
          key: 'key',
          align:'center',
        },
        {
          title: '活动标题',
          dataIndex: 'name',
          key: 'name',
          align:'center',
        },
        {
          title: '活动地址',
          dataIndex: 'address',
          key: 'address',
          align:'center',
        },
        {
          title:'开关',
          dataIndex:'begin',
          key:'begin',
          align:'center',
          render:(text,record) => {
            return (
              <>
                {
                  <Switch checked={record.begin} onChange={() => {onChange(record)}} />
                }
              </>
            )
          }
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          align:'center',
          render: tags => (
            <>
              {tags.map(tag => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                  color = 'volcano';
                }
                return (
                  <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                  </Tag>
                );
              })}
            </>
          ),
        },
        {
          title: 'Action',
          key: 'action',
          align:'center',
          render: (text, record) => (
            <Space size="middle">
              <a onClick={amend}>修改</a>
              <Popconfirm
                title="Are you sure to delete this datum"
                onConfirm={() => confirm(record)}
                onCancel={cancel}
                okText="Yes"
                cancelText="No"
              >
                <a href="#">删除</a>
              </Popconfirm>
            </Space>
          ),
        },
      ];


      

    return (
                <RightContariner>
                    {/* 搜索栏 */}
                    <Row className="seckillSelect">
                        <Col span="6" className="cols">
                            <p className="seckillSwitch">砍价状态:</p>
                            <Select defaultValue="请选择" style={{ width: 120 }}   onChange={handleChange} className="selects">
                                <Option value="请选择">请选择</Option>
                                <Option value="开启">开启</Option>
                                <Option value="关闭">关闭</Option>
                            </Select>
                        </Col>
                        <Col span="15" className='search'>
                            <p className="shop_search">
                                <span>商品搜索:</span>
                                <Input placeholder="商品名称、ID" onChange={(e) => {changes(e)}} value={val}></Input>
                                 {
                                     disables ? <Button icon={<SearchOutlined onClick={() => searchs()}  />} >

                                     </Button> : <Button icon={<SearchOutlined />} disabled>

                                     </Button>
                                 }
                            </p>
                        </Col>
                    </Row>
                    {/* 添加砍价商品 */}
                    <Row style={{marginTop:"10px"}}>
                        <Col span={5}>
                            <Button type="primary" onClick={addDatum}>添加砍价商品</Button>
                        </Col>
                    </Row>
                    {/* 砍价商品表格 */}
                    <Row style={{marginTop:"20px"}}>
                        <Col span={24}>
                            <Table columns={columns} dataSource={datas} />
                        </Col>
                    </Row>
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                      <p>Some contents...</p>
                      <p>Some contents...</p>
                      <p>Some contents...</p>
                    </Modal>
                </RightContariner>
       
    )
}

export default SeckillMoment